<template>
  <view class="w-full flex align-center justify-center relative" style="height: 100vh;background: #FAE6BC;">
    <!-- 左上角标志 -->
    <view class="absolute flex align-center" style="top: 30rpx;left: 30rpx;">
      <image :src="`${IMG_URL}/index/genealogy_select.png`" class="wh_82 hW_86"></image>
      <view class="flex flex-column ml_10">
        <view class="fs_46 color_FF4206 fw_500">拾亲</view>
        <view class="fs_28 color_FF4206 fw_500">再小的家庭 也要有传承</view>
      </view>
    </view>
    <!-- 登录 -->
    <view class="bg_FFFFFF flex align-center justify-between"
          style="width: 80%;height:56%;border-radius: 32rpx;overflow: hidden">
      <image style="width: 50%;height: 100%" :src="`${IMG_URL}/index/pc_login_banner.png`" mode="aspectFill"></image>
      <view style="width: 50%;height: 100%" class="flex flex-column align-center justify-center">
        <view style="font-size: 32px;color: #0F0F0F;font-weight: 500;text-align: center">欢迎登录拾亲PC端</view>
        <view style="width: 80%;background: #F1F5FB;height: 50%;margin-top: 38px;"
              class="flex flex-column align-center justify-center"
              v-if="!state.image"
              @click.stop="refreshQRCode"
        >
          <view style="color: #0F0F0F;font-size: 18px;font-weight: 400;">二维码已过期</view>
          <view class="flex align-center"
                style="margin-top: 5px;"
          >
            <text class="iconfont icon-ic_Refresh"></text>
            <view style="margin-left: 5px;">刷新</view>
          </view>
        </view>
        <view style="width: 80%;height: 50%;margin-top: 38px;"
              class="flex flex-column align-center justify-center"
              v-else
        >
          <image :src="state.image" style="width: 80%" mode="aspectFit"></image>
        </view>
        <view
          style="width: 273px;height: 48px;background: #FF440A;border-radius: 42px 42px 42px 42px;font-weight: 400;font-size: 22px;color: #FFFFFF;margin-top: 32px;"
          class="flex align-center justify-center"
        >
          拾亲 扫一扫登录
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const currentMode = computed(() => uni.getStorageSync('currentMode'));
  const mode = computed(() => sheep.$store('app').mode);
  const state = reactive({
    image: '',
    timer: null,
  });

  onLoad(async () => {
    await refreshQRCode();
  });

  async function refreshQRCode() {
    const { data } = await sheep.$api.user.getLoginQrCode();
    state.image = data.qr_code_image;
    state.timer = setInterval(async () => {
      const res = await sheep.$api.user.checkLoginStatus({
        qr_code: data.qr_code,
      });
      if (res.data.status != 0) {
        clearInterval(state.timer);
        const info = res.data;
        // let accountList = JSON.parse(uni.getStorageSync('account-list') || '[]');
        // let arr = accountList.filter((item) => item.account == info.username);
        // if (arr.length > 0) {
        //   sheep.$helper.toast('该账号已存在');
        //   return;
        // }
        const { code, msg } = await sheep.$api.user.smsLogin({
          mobile: info.username,
          code: sheep.$store('app').code,
          is_toggle: 0,
        });
        if (code == 1) {
          const userInfo = await sheep.$store('user').getInfo();
          await addAccount();

          if (!userInfo.surname || !userInfo.daimyo) {
            uni.reLaunch({
              url: '/pages/userData/sex',
            });
          } else {
            uni.navigateTo({
              url: '/pages/pc/index',
            });
          }

          await sheep.$store('AI').setAllSessionList();
          await sheep.$store('AI').setAllFollowList();
          await sheep.$store('family').getList();
          await sheep.$store('family').getFamilyTree();
          const bind_id = computed(() => sheep.$store('AI').bind_id);
          const bind_family_id = computed(() => sheep.$store('AI').bind_family_id);
          if (!!bind_id.value) {
            await sheep.$api.user.bindParent({ parent_id: bind_id.value });
          }
          if (!!bind_family_id.value && !!isLogin.value) {
            const { code } = await sheep.$api.family.applyFamily({ family_id: bind_family_id.value });
            if (code == 1) {
              sheep.$store('AI').setBindFamilyId('');
            }
          }
        }
      }
    }, 1000);
  }

  async function addAccount() {
    const userInfo = await sheep.$store('user').getInfo();
    let accountList = JSON.parse(uni.getStorageSync('account-list') || '[]');
    let arr = [];
    accountList.forEach((item) => {
      arr.push(item);
    });
    arr.push({
      account: userInfo.mobile,
      avatar: userInfo.avatar,
    });
    uni.setStorageSync('account-list', JSON.stringify(arr));
  }
</script>


<style scoped lang="scss">
  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }
</style>
